import { reactive, ref } from 'vue';

export default function importConfig() {
  const queryForm = reactive({
    value1: null,
    value2: null,
    value3: null,
    value4: null,
    value5: null,
  });

  const columns = [
    {
      title: '公司',
      dataIndex: 'name',
    },
    {
      title: '创建者',
      dataIndex: 'salary',
    },
    {
      title: '供应商编号',
      dataIndex: 'address',
    },
    {
      title: '供应商简称',
      dataIndex: 'email',
    },
    {
      title: '供应商名称',
      dataIndex: 'salary',
    },
    {
      title: '供应商邮箱',
      dataIndex: 'address',
    },
    {
      title: '供应商负责人',
      dataIndex: 'email',
    },
    {
      title: '供应商电话',
      dataIndex: 'address',
    },
    {
      title: '操作',
      slotName: 'optional',
    },
  ];
  const data = reactive([
    {
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com',
    },
    {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com',
    },
    {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com',
    },
    {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com',
    },
    {
      key: '6',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      key: '7',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com',
    },
    {
      key: '8',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com',
    },
    {
      key: '9',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com',
    },
    {
      key: '10',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com',
    },
    {
      key: '11',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com',
    },
  ]);

  const pagination = reactive({
    defaultPageSize: 10,
    total: data.length, //总条数
    current: 1,
    pageSize: 10,
    showTotal: true,
    showPageSize: true,
    pageSizeOptions: [10, 20, 30, 40, 50],
    hideOnSinglePage: true,
  });

  const editVisible = ref(false);

  const editForm = reactive({
    name: '',
    post: '',
  });

  const collection = reactive([
    { label: '公司名称', value: '', placeholder: '请输入公司名称', isInput: true },
    { label: '创建人', value: '', placeholder: '请输入公司名称', isSelect: true },
    { label: '供应商 ID', value: '', placeholder: '请输入公司名称', isRangePicker: true },
    { label: '供应商名称', value: '', placeholder: '请输入公司名称', isInput: true },
    { label: '负责人', value: '', placeholder: '请输入公司名称', isInput: true },
    { label: '负责人号码', value: '', placeholder: '请输入公司名称', isInput: true },
  ]);

  const edit = () => {
    editVisible.value = true;
  };

  const handlePageChange = (page: number) => {
    pagination.current = page;
  };
  const handlePageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
  };

  return {
    queryForm,
    columns,
    data,
    editVisible,
    editForm,
    collection,
    pagination,
    edit,
    handlePageChange,
    handlePageSizeChange,
  };
}
